<template>
	<div class="panel_container">
		<draggable v-model="internalProducts" class="draggable" animation="300" handle=".mover" item-key="id"
			@update="handleSave">
			<!-- 修改后的正确插槽用法 -->
			<div v-for="element in internalProducts" :key="element.id" class="item_select">
				<i class="el-icon-rank mover"></i>
				<item-filter-picker :id="element.id" :items="processedItems"
					@change="(newVal) => handleIdChange(element.id, newVal)" class="item_picker" />
				<el-input-number v-model="element.number" :min="1" class="number" @change="handleSave" />
				<el-button type="danger" icon="el-icon-delete" class="del_btn" @click="handleDelete(element.id)" />
			</div>
		</draggable>

		<div class="buttons">
			<el-button type="success" class="btn" @click="handleInsert" :disabled="!hasAvailableItems">
				添加物品
			</el-button>
		</div>
	</div>
</template>

<script>
	import draggable from 'vuedraggable';
	import ItemFilterPicker from './ItemFilterPicker.vue';
	import {
		Item
	} from "@/assets/js/item";
	import {
		cloneDeep
	} from 'lodash-es';

	export default {
		name: "ItemSelectPanel",
		components: {
			draggable,
			ItemFilterPicker
		},
		props: {
			initialProducts: {
				type: Array,
				default: () => [],
				validator: value => value.every(item => item.id && item.number)
			},
			initialItems: {
				type: Array,
				default: () => [],
				validator: value => value.every(item => item.id)
			}
		},
		emits: ["update"],
		data() {
			return {
				internalProducts: this.normalizeProducts(this.initialProducts),
			};
		},
		computed: {
			// 处理后的物品列表，包含是否可用的状态
			processedItems() {
				return this.initialItems.map(item => ({
					...item,
					isShow: !this.internalProducts.some(p => p.id === item.id)
				}));
			},
			// 检查是否还有可添加的物品
			hasAvailableItems() {
				return this.processedItems.some(item => item.isShow);
			}
		},
		watch: {
			initialProducts: {
				handler(newVal) {
					this.internalProducts = this.normalizeProducts(newVal);
				},
				deep: true
			}
		},
		methods: {
			// 标准化产品数据
			normalizeProducts(products) {
				return products.map(p =>
					p instanceof Item ? p : new Item(p.id, p.number)
				);
			},
			// 添加新物品
			handleInsert() {
				const availableItem = this.processedItems.find(item => item.isShow);
				if (!availableItem) {
					this.$message.warning('当前没有可用的物品可以添加');
					return;
				}
				this.internalProducts.push(new Item(availableItem.id, 1));
				this.handleSave();
			},
			// 删除物品
			handleDelete(id) {
				const index = this.internalProducts.findIndex(p => p.id === id);
				if (index !== -1) {
					this.internalProducts.splice(index, 1);
					this.handleSave();
				}
			},
			// ID变更处理
			handleIdChange(oldId, newId) {
				const product = this.internalProducts.find(i => i.id === oldId);
				if (product) {
					product.id = newId;
					// console.log(product);
					this.handleSave();
				}
			},
			// 保存处理
			handleSave() {
				this.$emit("update", cloneDeep(this.internalProducts));
			}
		}
	};
</script>

<style lang="less" scoped>
	.panel_container {
		.draggable {
			margin-bottom: 8px;

			.item_select {
				margin: 8px;
				display: flex;
				justify-content: space-around;
				align-items: center;
				gap: 12px;
				background: #fff;
				border-radius: 4px;
				transition: all 0.3s ease;

				.mover {
					font-size: 24px;
					color: #999;
					cursor: move;
					transition: color 0.2s;

					&:hover {
						color: #666;
					}
				}

				.item_picker {
					width: 60%;
					// margin-right: 50px;
				}

				.number {
					width: 30%;
				}

				.del_btn {
					flex-shrink: 0;
				}
			}
		}

		.buttons {
			padding: 8px 0;

			.btn {
				width: 100%;
				height: 40px;
				font-size: 14px;
			}
		}
	}
</style>